<template>
  <view class="college">
        <view>
            <image class="image" src="https://img0.baidu.com/it/u=3594305749,812750419&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800"
                    mode="widthFix"></image>
        </view>
        <fui-tabs center size="25" scale="1" selectedColor="#000"	 :tabs="tabs" @change="change"></fui-tabs>
        <fui-collapse-item v-if="def === 0" v-for="(item,index) in textList" :key="item.title">
            <view class="fui-item__box">
                <view  class="fui-logo">{{index + 1}}</view>
                <text>{{item.title}}</text>
            </view>
            <template v-slot:content>
                <!-- <view class="fui-descr">{{item.content}}</view> -->
                <rich-text :nodes="item.textHtml"></rich-text>
            </template>
        </fui-collapse-item>

        <view class="course" v-else>
            <view >
                <image style="width: 300rpx"  mode="widthFix" src="https://img1.baidu.com/it/u=3820189306,288154822&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=281"></image>
            </view>
            <view class="course-text">
                <view>【新人必看】潮玩君平台基础功能介绍与变现逻辑详解</view>
                <view class="text-number">已经9999人学习</view>
            </view>
        </view>
  </view>
</template>

<script setup lang="ts">
 import dyNoticeService from "@/api/dyNoticeService";
 import type { IListByTypeRes } from "@/api/model/dyNoticeModel";
 const textList = ref<Array<IListByTypeRes>>()
 const listByType = async ()=>{
  const {success,result} =  await dyNoticeService.listByType({type:2})
  if(success){
    textList.value =  result
  }
 }
const tabs = ref(['常见问题', '高级课程'])
const def = ref(0)
const change = (e:any)=>{
    def.value = e.index
}

onLoad(()=>{
    listByType()
})

</script>

<style lang="scss" scoped>
.college{
    padding: 28rpx;
    font-size: 25rpx;
    .image{
        width: 100%;
        border-radius: 8rpx;
    }
    .fui-item__box {
	width: 100%;
	padding: 26rpx 32rpx;
	box-sizing: border-box;
	display: flex;
	align-items: center;
    }

    .fui-logo {
        width: 40rpx;
        height: 40rpx;
        margin-right: 24rpx;
        display: block;
        background-color: red;
        border-radius: 8rpx;
        line-height: 40rpx;
        text-align: center;
        color: white;
    }

    .fui-descr {
        width: 100%;
        padding: 32rpx;
        font-size: 25rpx;
        line-height: 52rpx;
        color: #7F7F7F;
        word-break: break-all;
        box-sizing: border-box;
    }
    .course{
        display: flex;
        justify-content: space-between;
        image{
            border-radius: 8rpx;
        }
        .course-text{
            padding: 20rpx;
            padding-left: 30rpx;
        }
        .text-number{
            font-size: 20rpx;
            position: relative;
            top: 53rpx;
            color: $uni-text-color-placeholder;
        }
    }
}

</style>
